﻿@using RuoVea.ExUtil
@{
    Layout = "";
    string JobRootUrl = "123";
    ViewData["Title"] = "Home Page";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MES</title>
    <link href="/elementui/index.css" rel="stylesheet" />
    <link href="/css/site.css" rel="stylesheet" />
</head>
<body>

    <div class="app-wrapper" id="main">
        <div class="layout-aside" v-bind:class="{collapse:isCollapse}">
            <div class="layout-logo">
                <div>
                    <img src="/img/logo.png" alt="logo" />
                    <span v-show="!isCollapse">工业品超市管理后台</span>
                </div>
            </div>
            <el-scrollbar class="sidebar-scroll">
                <el-menu default-active="1-4-1" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409eff" style="border:none">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">导航一</span>
                        </template>
                        <el-menu-item-group>
                            <span slot="title">分组一</span>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <span slot="title">选项4</span>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="layout-container" v-bind:class="{collapse:isCollapse}">
            <div class="layout-header" v-bind:class="{collapse:isCollapse}">
                <div class="header-wrapper">
                    <div class="header-left">
                        <!-- 使用 @@ 替代 v-on: 进行事件绑定 -->
                        <div class="open-icon" v-on:click="handleCollapse">
                            <!-- 使用 v-if 替代 v-show 进行条件渲染 -->
                            <i class="el-icon-s-fold" v-if="!isMenuOpen"></i>
                            <i class="el-icon-s-unfold" v-if="isMenuOpen"></i>
                        </div>
                        <el-breadcrumb separator="/">
                            <!-- 确保使用 (key, index) in list 语法 -->
                            <div v-for="(item, index) in breadcrumbList" v-bind:key="index">
                                <el-breadcrumb-item v-if="item.meta.title" v-bind:to="{ path: item.path }">
                                </el-breadcrumb-item>
                            </div>
                        </el-breadcrumb>
                    </div>
                    <div class="header-right">
                        <span class="header-user">{{ currentName }},欢迎回来</span>
                        <el-dropdown trigger="click">
                            <!-- 使用 v-slot 替代 slot 指令 -->
                            <span class="el-dropdown-link">
                                <img src="/img/logo.png" style="height:40px" alt="avatar" />
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu>
                                <!-- 修复错误的 icon 属性 -->
                                <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
                                <!-- 添加点击事件绑定 -->
                                <el-dropdown-item icon="el-icon-circle-plus" v-on:click.native="handleLogout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
            <div class="layout-main">
                <div class="app-main">
                    <!-- 确保使用正确的组件名 router-view -->
                    <div name="fade-transfrom" mode="out-in">
                        确保使用正确的组件名
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="/elementui/index.js"></script>
    <script type="text/javascript" src="/vue/axios.min.js"></script>

    <script>

        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    isCollapse: false,

                    isMenuOpen: false,
                    breadcrumbList: [],
                    currentName: '李四',

                }
            },
            watch: {

            },
            created() {

            },
            mounted: function () {
                // this.updateBreadcrumb(this.$route.matched);
                // this.handleChangeName();

                // this.currentRouter = this.$route.path;
                console.log(this.isCollapse);
            },
            methods: {
                // // ...mapMutations(['changeCollapse']),
                // updateBreadcrumb(list = []) {
                //     this.breadcrumbList = list;
                // },
                // handleChangeName() {
                //     this.currentName ="asdsadsad"
                //     // applicationConfiguration().then(res => {
                //     //     this.currentName = res.currentUser.userName;
                //     // })
                // },
                handleCollapse() {
                    this.isMenuOpen = !this.isMenuOpen;
                    this.isCollapse = this.isMenuOpen;
                    // this.$store.commit('changeCollapse', this.isMenuOpen);
                },
                handleLogout() {
                    this.$confirm('确认退出?', '提示', {
                        confirmButtonTextt: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        logout();
                        // this.$router.push('/login');
                    }).catch(() => { })
                },
                hasOneShowingChild(children = [], parent) {
                    const showingChildren = children.filter(item => {
                        if (item.hidden) {
                            return false;
                        } else {
                            // 确保 this 指向正确，使用箭头函数
                            this.onlyOneChild = item;
                            return true;
                        }
                    });
                    if (showingChildren.length === 1) {
                        this.onlyOneChild = showingChildren[0]; // 直接使用数组的第一个元素
                        return true;
                    }
                    if (showingChildren.length === 0) {
                        this.onlyOneChild = { ...parent, onShowingChildren: true };
                        return true;
                    }
                    return false;
                }
            },
            filters: {

            }
        });
    </script>

</body>
</html>